<template>
  <div class="selfHelp">
    <div class="scrollContent" ref="scrollCon" @scroll="scrollCon">
      <div class="con-item">
        <div class="item-top">
          <!-- <img class="img" src="../../assets/img/class/qq.png" alt="" /> -->
          <div class="item-label">我的订单</div>
        </div>
        <div class="item-bot">
          <!-- <img class="img" src="../../assets/img/class/wx.png" alt="" /> -->
          <div class="item-label">个人信息</div>
        </div>
      </div>
      <div class="con-item">
        <div class="item-top">
          <!-- <img class="img" src="../../assets/img/class/qq.png" alt="" /> -->
          <div class="item-label">我的订单</div>
        </div>
        <div class="item-bot">
          <!-- <img class="img" src="../../assets/img/class/wx.png" alt="" /> -->
          <div class="item-label">个人信息</div>
        </div>
      </div>
      <div class="con-item">
        <div class="item-top">
          <!-- <img class="img" src="../../assets/img/class/qq.png" alt="" /> -->
          <div class="item-label">我的订单</div>
        </div>
        <div class="item-bot">
          <!-- <img class="img" src="../../assets/img/class/wx.png" alt="" /> -->
          <div class="item-label">个人信息</div>
        </div>
      </div>
      <div class="con-item">
        <div class="item-top">
          <!-- <img class="img" src="../../assets/img/class/qq.png" alt="" /> -->
          <div class="item-label">我的订单</div>
        </div>
        <div class="item-bot">
          <!-- <img class="img" src="../../assets/img/class/wx.png" alt="" /> -->
          <div class="item-label">个人信息</div>
        </div>
      </div>
      <div class="con-item">
        <div class="item-top">
          <!-- <img class="img" src="../../assets/img/class/qq.png" alt="" /> -->
          <div class="item-label">我的订单</div>
        </div>
        <div class="item-bot">
          <!-- <img class="img" src="../../assets/img/class/wx.png" alt="" /> -->
          <div class="item-label">个人信息</div>
        </div>
      </div>
    </div>
    <div class="scrollSlider" ref="scrollBox">
      <div class="contentSlider" ref="scrollBar"></div>
    </div>
  </div>
</template>

<script>
// import apis from '@/http/custom.js'
export default {

  data () {
    return {
      conScrollWidth: '', // 滚动内容的宽度
      conClientWidth: '', // box的宽度
      conScrollLeft: '',  // 滚动了的距离
    }
  },
  methods: {
    // 滚动事件
    scrollCon (e) {
      this.conScrollWidth = e.target.scrollWidth
      this.conClientWidth = e.target.clientWidth
      this.conScrollLeft = e.target.scrollLeft
      var scale = (this.conScrollWidth - this.conClientWidth) / (this.$refs.scrollBox.clientWidth - this.$refs.scrollBar.clientWidth)
      this.$refs.scrollBar.style.marginLeft = (this.conScrollLeft / scale) + 'px'
    }
  }
}
</script>

<style lang="scss" scoped>
.selfHelp {
  .scrollContent {
    width: 100%;
    height: 120px;
    overflow-y: hidden;
    overflow-x: auto;
    white-space: nowrap;
    border: 1px solid red;
    .con-item {
      text-align: center;
      display: inline-block;
      background-color: cyan;
      width: 25%;
      height: 120px;
      .item-top {
        height: 60px;
      }
      .item-bot {
        height: 60px;
      }
      .img {
        width: 30px;
        height: 30px;
      }
      .item-label {
        font-size: 12px;
      }
    }
  }
  .scrollContent::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 0;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 0;
  }
  .scrollSlider {
    margin: 0 auto;
    margin-top: 20px;
    height: 5px;
    width: 50px;
    border-radius: 50px;
    background-color: chocolate;
    .contentSlider {
      height: 5px;
      width: 20px;
      background-color: cornflowerblue;
    }
  }
}
</style>